import { Component, toNative } from 'vue-facing-decorator'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { FilterDto } from '@/render/FilterRender'
import type { AnyObject } from '@/types'
import { getKeyToEnum, InvoiceTypeCnEnum, InvoiceUploadStatusCnEnum } from '@/const/enum'
import { exportInvoice, getInvoiceList } from '@/api/invoice'
import type { InvoiceDto } from '@/api/invoice/types'
import { downloadFile } from '@/utils/util'
import { message } from 'ant-design-vue'
import { getSaleList } from '@/api/sale'
import { getSystemUserList } from '@/api/system'

@Component
export class Invoice extends TableRender {
    showUploadZip = false
    showUpload = false

    uploadFile = null as File | null
    curItem = {} as InvoiceDto

    filterConfig() {
        return {
            companyName: {
                name: '客户名称',
                element: 'autoComplete',
                class: 'w-full',
                placeholder: '请输入后选择',
                optionsType: 'company'
            },
            deptId: {
                name: '所属分组',
                element: 'select',
                optionsType: 'saleDept',
                callback: {
                    change: async (ev: number) => {
                        this.filters.salesId.value = ''
                        if (ev) {
                            this.filters.salesId.options = (
                                await getSystemUserList({
                                    deptId: ev,
                                    pageNum: 1,
                                    pageSize: 999
                                })
                            ).rows?.map((i) => {
                                return {
                                    label: i.nickName,
                                    value: i.userId
                                }
                            })
                        } else {
                            this.filters.salesId.options = (await getSaleList()).map((i) => {
                                return {
                                    label: i.saleName,
                                    value: i.saleId
                                }
                            })
                        }
                    }
                }
            },
            salesId: {
                name: '所属商务',
                element: 'select',
                optionsType: 'saleList'
            },
            applicationMonth: {
                name: '申请月份',
                element: 'datetime',
                params: {
                    type: 'month',
                    valueFormat: 'YYYY-MM'
                }
            },
            month: {
                name: '发票月份',
                element: 'datetime',
                params: {
                    type: 'month',
                    valueFormat: 'YYYY-MM'
                }
            },
            type: {
                name: '发票类型',
                element: 'select',
                options: getKeyToEnum(InvoiceTypeCnEnum)
            },
            receiptIds: {
                name: '收款账户',
                element: 'select',
                multiple: true,
                params: {
                    maxTagCount: 1
                },
                optionsType: 'receipt',
                placeholder: '请选择（可多选）'
            }
        } as FilterDto
    }

    tableColumnConfigOld = () =>
        [
            {
                field: 'operate',
                title: '操作',
                width: 90,
                fixed: 'left',
                params: {
                    buttons: [
                        {
                            text: '下载',
                            event: (row: InvoiceDto) => {
                                row.invoiceUrl && downloadFile(row.invoiceUrl)
                            }
                        }
                    ]
                },
                slots: {
                    default: 'buttons'
                }
            },
            {
                field: 'companyName',
                title: '客户名称',
                width: 200
            },
            {
                field: 'type',
                title: '发票类型',
                formatter: ({ row }) => {
                    return InvoiceTypeCnEnum[row.type]
                }
            },
            {
                field: 'status',
                title: '开票状态',
                params: {
                    colors: {
                        1: 'blue-200',
                        2: 'green'
                    }
                },
                formatter: ({ row }) => {
                    return InvoiceUploadStatusCnEnum[row.status]
                },
                slots: {
                    default: 'status'
                }
            },
            {
                field: 'month',
                title: '发票月份',
            },
            {
                field: 'applyTime',
                title: '申请时间',
                width: 150
            },
            {
                field: 'amount',
                title: '发票金额',
                params: {
                    color: 'black-100'
                },
                slots: {
                    default: 'price'
                }
            },
            {
                field: 'rechargeAmount',
                title: '充值金额',
                params: {
                    color: 'black-100'
                },
                slots: {
                    default: 'price'
                }
            },
            {
                field: 'updateTime',
                title: '开票日期',
                width: 150
            },
            {
                field: 'salesName',
                title: '所属商务'
            },
            {
                field: 'bankName',
                title: '收款账户',
                width: 200
            }
        ] as TableRenderColumnTypes<InvoiceDto>



    async onExport() {
        const params = this.getFilters()
        params.status = InvoiceUploadStatusCnEnum.未上传
        if (!params.applicationMonth) {
            message.warning('请先选择申请月份')
            return
        }
        const res = await exportInvoice(params)
        downloadFile(res)
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getInvoiceList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <>
                {super.render()}
            </>
        )
    }
}

export default toNative(Invoice)
